<?php
use think\facade\Request;
?>
{include file="../app/common/admin/lib/header.html" title="公众号添加"}
{js href="./static/js/fancybox/jquery.fancybox.js"}
{js href="./static/js/fancybox/jquery.fancybox.pack.js"}
{js href="./static/js/fancybox/jquery.fancybox-buttons.js"}
{css href="./static/js/fancybox/jquery.fancybox-buttons.css"}
{css href="./static/js/fancybox/jquery.fancybox.css"}
<div class="page-header border-bottom clearfix">
  <h2 class="left">公众号管理<span>{if $info}编辑{else}添加{/if}公众号</span></h2>
  <a href="{AnUrl('open_card/admin')}" class="btn btn-default btn-sm right">&lt;&nbsp;返回公众号列表</a>
</div>
<!--start:公众号新增-->
<div class="add-form">
  <form class="js_creatForm" action="{:url('/open_card/admin/save')}" method="post" enctype="multipart/form-data">
    <input type="hidden" name="id" value="{$info.id}">
    <table class="table" cellpadding="0" cellspacing="0">
      <tr>
        <th><label for="" class="add-f-label">公众号名称：</label></th>
        <td>
          <input name="title" style="width:280px;" value="{$info.title}" type="text" class="add-f-ipt1 js_title">
          <div class="tips"><span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>公众号名称用于管理时使用</div>
        </td>
      </tr>
      <tr>
        <th><label for="" class="add-f-label">微信号：</label></th>
        <td>
          <input name="wechat_id" style="width:280px;" value="{$info.wechat_id}" type="text" class="add-f-ipt1 js_wechatId">
          <div class="tips"><span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>微信号用于详情页展示，<a data-fancybox-type="image" rel="fancybox-button-wechat" href="{$Think.const.SITE_URL}/static/images/admin/wechat_id.png" class="fancybox-button-wechat">如何获取</a></div>
        </td>
      </tr>
      <!--{/*<tr>-->
        <!--<th><label for="" class="add-f-label">公众号原始ID：</label></th>-->
        <!--<td>-->
          <!--<input name="card" style="width:280px;" value="{$info.card}" type="text" class="add-f-ipt1 js_card">-->
          <!--<div class="tips"><span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>公众号原始ID用于公众号认证，<a data-fancybox-type="image" rel="fancybox-button-card" href="{$Think.const.SITE_URL}/images/controller/card_notice.png" class="fancybox-button-card">如何获取</a></div>-->
        <!--</td>-->
      <!--</tr>*/}-->
      <tr>
        <th valign="top"><label for="" class="add-f-label">公众号封面：</label></th>
        <td class="perUpOuter">
          <div class="clearfix">
            <div class="btn-upload left">
              <a href="javascript:void(0);"><i class="icon-upload"></i>上传封面</a>
              <input class="js_cover js_upFile"  type="file" name="cover">
            </div>
            <span class="tips left">&nbsp;&nbsp;&nbsp;<span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>封面图比例200*200</span>
          </div>
          <div class="js_upFileBox" {if !$info.cover}style="display:none;"{/if}>
              {if $info.cover}<img src="{:_image($info.cover, 'small')}">{/if}
          </div>
        </td>
      </tr>
      <tr>
        <th><label for="" class="add-f-label">二级域名：</label></th>
        <td style="color:#898989;">
          http://&nbsp;<input {if $info}readonly{/if} name="domain" style="width:100px;" value="{$info.domain}" type="text" class="add-f-ipt1 js_domain">&nbsp;.{:Request::rootDomain()}
          <div class="tips"><span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>二级域名字符数量为5~20之间，只能是字母(小写)、数字，不能以数字开头{if !$info}，还可输入 <span class="js_domainNum" style="color:red;">20</span> 字符{/if}</div>
        </td>
      </tr>
      <tr>
        <th valign="top"><label for="" class="add-f-label">公众号简介：</label></th>
        <td><textarea class="add-f-area js_intro" name="intro">{$info.intro}</textarea></td>
      </tr>
      <!--{/*<tr>-->
        <!--<th valign="top"><label for="" class="add-f-label">公众号内容：</label></th>-->
        <!--<td><textarea class="js_content" name="content" id="js_editor" style="width:490px;">{$info.content}</textarea></td>-->
      <!--</tr>-->
      <!--<tr>-->
        <!--<th><label for="" class="add-f-label">排序：</label></th>-->
        <!--<td><input name="view_order" style="width:102px;" value="{$info.view_order}" type="text" class="add-f-ipt1"></td>-->
      <!--</tr>-->
      <!--<tr>-->
        <!--<th valign="top"><span class="add-f-label">公众号状态：</span></th>-->
        <!--<td>-->
          <!--<label for="normal" class="add-f-label"><input id="normal" type="radio" name="status" value="1" class="add-f-radio"{if $info.status == 1 || !isset($info.status)} checked="checked" {/if}>正常</label>&nbsp;&nbsp;-->
          <!--<label for="delete" class="add-f-label"><input id="delete" type="radio" name="status" value="0" class="add-f-radio"{if $info.status == 0 && $info} checked="checked" {/if}>删除</label>-->
        <!--</td>-->
      <!--</tr>-->
      <!--*/}-->
      <tr><td></td><td class="noborder"><button type="submit" class="btn btn-success js_submit">&nbsp;&nbsp;&nbsp;确认&nbsp;&nbsp;&nbsp;</button>&nbsp;&nbsp;&nbsp;{/*<button type="reset" class="btn-reset">取消</button>*/}</td></tr>
    </table>
  </form>
</div>
<style>
a {
    color:#23a18b;
}
</style>
<script>
/**
 * 输入字符总数
 * @param string content
 * @return int
 */
function getDomainNum(content)
{
  var regx = "[\u4e00-\u9fa5]|[\uFE30-\uFFA0]";
  content = content.replace(new RegExp(regx, 'gm'), '11');
  
  return content.length;
}
function setNum(thisClass, maxNum) {
  var presentNum = getDomainNum($('.'+thisClass).val());
  var remainNum  = maxNum - presentNum;
  $('.'+thisClass+'Num').text(remainNum);
}

var infoId = "{$info.id}" || 0;
$(function(){
  if (!infoId || infoId == 0) {
    // 初始化domain字数
    setNum('js_domain', 20);
    $('.js_domain').keyup(function(){
      setNum('js_domain', 20);
    });
  }
  
  $(".fancybox-button-wechat").fancybox({
    prevEffect  : 'none',
    nextEffect  : 'none',
    closeBtn    : false,
    helpers     : {
        title   : { type : 'over' },
        buttons : {}
    }
  });
  $(".fancybox-button-card").fancybox({
    prevEffect  : 'none',
    nextEffect  : 'none',
    closeBtn    : false,
    helpers     : {
        title   : { type : 'over' },
        buttons : {}
    }
  });
  
  // 提交验证
  $('.js_submit').click(function(e){
    e.preventDefault();
    if ($('.js_submit').attr('is_post') == 1) {
      showMsg('正在提交信息，请稍候 ...');
      return false;
    }
    
    var title    = $.trim($('.js_title').val());
    var wechatId = $.trim($('.js_wechatId').val());
    //var card     = $.trim($('.js_card').val());
    var domain   = $.trim($('.js_domain').val());
    //console.log(title);
    if (!title) {
      showMsg('公众号名称不能为空');
      return;
    }
    if (!wechatId) {
      showMsg('微信号不能为空');
      return;
    }
    /*
    if (!card) {
      showMsg('原始ID不能为空');
      return;
    }*/
    if (!infoId || infoId == 0) {
      var cover = $.trim($('.js_cover').val());
      if (!cover) {
        showMsg('封面不能为空');
        return;
      }
    }
    if (!domain) {
      showMsg('二级域名不能为空');
      return;
    }
    var pattern = /^[a-z][a-z0-9]*$/;　
    if (domain && !pattern.test(domain)) {
      showMsg('二级域名只能是字母(小写)、数字，不能以数字开头');
      return;
    }
    //alert(getDomainNum(domain));return;
    if (getDomainNum(domain) < 2 || getDomainNum(domain) > 20) {
      showMsg('二级域名字符数量为5~20之间');
      return;
    }

    postData = {
       'title'     : title,
       //'wechat_id' : wechatId,
       //'card'      : card,
       'domain'    : domain,
       'id'        : infoId
    };
    //console.log(postData);
    $('.js_submit').attr('is_post', 1);
    $.post(
        siteUrl+'/open_card/admin/check_info',
        postData,
        function(json){
         // $('.js_submit').attr('is_post', 0);
            console.log(json);
          if (json.info != 'ok') {
            showMsg(json.info);
            return;
          }

          $('.js_creatForm').submit();
        },'json'
    );
  });
  
  // 上传图片预览
  $(".js_upFile").each(function(i){
    $(this).change(function(e){
      handleFileSelect($(this));
    });
  });
});
</script>
{js href="./static/js/category.js"}
{include file="../app/common/admin/lib/footer.html"}